<template>
  <div
    :class="prefixCls"
    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
  >
    <div class="relative mx-auto h-full flex">
      <div
        :class="`${prefixCls}__left flex-1 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
        style="background-color: #171930"
      >
        <!-- 左上角的 logo + 系统标题 -->
        <!-- <div class="relative flex items-center text-white">
          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
          <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
        </div> -->
        <!-- 装饰性线条元素 -->
        <div class="absolute inset-0 overflow-hidden">
          <!-- 坐标系网格线 -->
          <!-- X轴线条 -->
          <div class="grid-line absolute top-1/3 left-0 w-full h-px bg-white/20"></div>
          <div class="grid-line absolute top-2/3 left-0 w-full h-px bg-white/15"></div>
          <div class="grid-line absolute top-1/2 left-0 w-full h-px bg-white/10"></div>

          <!-- Y轴线条 -->
          <div class="grid-line absolute top-0 left-1/3 w-px h-full bg-white/20"></div>
          <div class="grid-line absolute top-0 left-2/3 w-px h-full bg-white/15"></div>
          <div class="grid-line absolute top-0 left-1/2 w-px h-full bg-white/10"></div>

          <!-- 对角线网格 -->
          <div class="absolute top-0 left-0 w-full h-full">
            <div
              class="absolute top-0 left-0 w-full h-px bg-white/8 transform rotate-45 origin-left"
            ></div>
            <div
              class="absolute top-0 right-0 w-full h-px bg-white/8 transform -rotate-45 origin-right"
            ></div>
          </div>

          <!-- 坐标轴箭头 -->
          <div
            class="absolute top-1/3 right-10 w-0 h-0 border-l-8px border-r-8px border-b-12px border-l-transparent border-r-transparent border-b-white/30"
          ></div>
          <div
            class="absolute bottom-10 left-1/3 w-0 h-0 border-t-8px border-b-8px border-l-12px border-t-transparent border-b-transparent border-l-white/30"
          ></div>

          <!-- 网格点 -->
          <div class="absolute top-1/3 left-1/3 w-2px h-2px bg-white/40 rounded-full"></div>
          <div class="absolute top-1/3 left-2/3 w-2px h-2px bg-white/40 rounded-full"></div>
          <div class="absolute top-2/3 left-1/3 w-2px h-2px bg-white/40 rounded-full"></div>
          <div class="absolute top-2/3 left-2/3 w-2px h-2px bg-white/40 rounded-full"></div>
          <div class="absolute top-1/2 left-1/2 w-3px h-3px bg-white/50 rounded-full"></div>

          <!-- 坐标标签 -->
          <div class="absolute top-1/3 right-5 text-12px text-white/60 font-mono">Y</div>
          <div class="absolute bottom-5 left-1/3 text-12px text-white/60 font-mono">X</div>

          <!-- 动态数据点 -->
          <div
            class="decoration-circle absolute top-1/4 left-1/4 w-4px h-4px bg-white/60 rounded-full"
          ></div>
          <div
            class="decoration-circle absolute top-3/4 left-3/4 w-4px h-4px bg-white/60 rounded-full"
            style="animation-delay: 1s"
          ></div>
          <div
            class="decoration-circle absolute top-1/2 left-1/6 w-3px h-3px bg-white/50 rounded-full"
            style="animation-delay: 2s"
          ></div>
        </div>

        <!-- 左边的背景图 + 欢迎语 -->
        <div class="h-[calc(100%-60px)] flex items-center justify-center relative z-10">
          <TransitionGroup
            appear
            enter-active-class="animate__animated animate__bounceInLeft"
            tag="div"
            class="text-center"
          >
            <img key="1" alt="" class="w-350px mb-8" src="@/assets/svgs/login-box-bg.svg" />
            <div key="2" class="text-3xl text-white font-bold tracking-wider">{{
              t('login.welcome')
            }}</div>
            <div key="3" class="mt-8 text-16px font-normal text-white/80 max-w-400px">
              <div class="flex flex-wrap gap-2 justify-center">
                <span class="px-2 py-1 bg-white/10 text-white text-sm rounded">智能分析</span>
                <span class="px-2 py-1 bg-white/10 text-white text-sm rounded">实时监控</span>
                <span class="px-2 py-1 bg-white/10 text-white text-sm rounded">数据可视化</span>
                <span class="px-2 py-1 bg-white/10 text-white text-sm rounded">安全防护</span>
              </div>
            </div>
          </TransitionGroup>
        </div>
      </div>
      <div
        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
      >
        <!-- 右上角的主题、语言选择 -->
        <div
          class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
          style="color: var(--el-text-color-primary)"
        >
          <!-- <div class="flex items-center at-2xl:hidden at-xl:hidden">
            <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
          </div> -->
          <div class="flex items-center justify-end space-x-10px h-48px">
            <ThemeSwitch />
            <LocaleDropdown />
          </div>
        </div>
        <!-- 右边的登录界面 -->
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div
            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
          >
            <!-- 登录表单容器 -->
            <div class="w-full max-w-420px mx-auto px-4 sm:px-6 lg:px-8">
              <!-- 登录标题区域 -->
              <div class="text-center mb-6">
                <h1 class="text-24px font-bold text-gray-800 dark:text-white mb-2"> 欢迎回来 </h1>
                <p class="text-14px text-gray-500 dark:text-gray-400">请输入您的登录信息以继续</p>
              </div>

              <!-- 账号登录表单 -->
              <div
                class="bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700"
              >
                <LoginForm class="p-6" />
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'

import { LoginForm } from './components'

defineOptions({ name: 'Login' })

const { t } = useI18n()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

// 数据点脉冲动画
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

// 网格线闪烁动画
@keyframes gridFlicker {
  0%,
  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.3;
  }
}

.#{$prefix-cls} {
  overflow: auto;

  &__left {
    position: relative;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }

    // 几何坐标系动画
    .decoration-circle {
      animation: pulse 3s ease-in-out infinite;
    }

    // 网格线动画
    .grid-line {
      animation: gridFlicker 4s ease-in-out infinite;
    }
  }
}
</style>

<style lang="scss">
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}

.text-3xl {
  font-size: 60px;
  line-height: 45px;
}
</style>
